import * as React from 'react';
import * as _ from 'underscore';


export interface AttachmentsFiltersProps {
    id?: string;
    className?: string;
    selected?: string;
    filters: {
        [key: string]: {
            text: string;
            props: any;
            priority: number;
        };
    };
}

export interface AttachmentsFiltersState {

}

export class AttachmentsFilters extends React.Component<AttachmentsFiltersProps, AttachmentsFiltersState> {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {

    }

    render() {
        let {filters, id = "media-attachment-filters", className = "attachment-filters"} = this.props;
        let items = _.chain(filters).map((filter, value) => {
            return {
                data: {value: value, text: filter.text},
                priority: filter.priority || 50
            };
        }, this ).sortBy('priority').pluck('data').value();

        return (
            <select id={id} className={className} onChange={this.handleChange}>
                {_.map(items, item => {
                    return <option value={item.value} key={item.value} selected={this.props.selected === item.value}>{item.text}</option>
                })}
            </select>
        );
    }
}

(AttachmentsFilters as React.ComponentClass<AttachmentsFiltersProps>).defaultProps = {
    filters: {}
};
